<template>
  <div id="nav">
    <Menu mode="horizontal" theme="dark" active-name="1" @on-select="select">
      <MenuItem name="phone"> 
          手机
      </MenuItem>
      <MenuItem name="clothes"> 
          服饰
      </MenuItem>
      <MenuItem name="3">
          生鲜
      </MenuItem>
      <MenuItem name="4">
          图书
      </MenuItem>
      <div class="a">
       <Dropdown trigger="click" style="margin-left: 20px" @on-click="logout">
        <a href="javascript:void(0)" style="color:#fff;">
           {{name}}
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <DropdownItem name="logout" >退出</DropdownItem>
        </DropdownMenu>
    </Dropdown></div>
    </Menu>
  </div>
</template>

<script>
import service from '@/service/index'
export default {
  name: "navbar",
  data() {
    return {
      name: ''
    }
  },
  methods:{
    select (name) {
      console.log(name)
      this.$router.push({ path: '/' + name})
    },
    logout (name) {
      console.log(name)
      service.post('/v1/logout')
      .then((res)=>{
        console.log(res)
        if(res.retcode===1){
          this.$router.push({ path: '/login'})
        }
      })
    }
  },
  created(){
    service.get('/v1/getUser')
   .then((data) => {
    console.log(data)
    this.name=data.userName
  })
  }
};
</script>
<style>
 #nav .ivu-menu-item-active{
  color: deepskyblue
}
.a{
  color:aquamarine;
  float:right;
  margin: 0 10px 0 0;
}
</style>
<style lang="scss" scoped>
</style>
